<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/React/react.devlopment.js"></script>
    <script src="./lib/React/react-dom.development.js"></script>
</head>
<body>
    <div id="app"></div>

    <script>

        /*
            a. 渲染/挂载 - 把创建的 虚拟dom， 变成页面中真实的标签元素
            b. 虚拟dom比真实的dom对象，减少很多无用的属性，节约开销
            c. 虚拟dom在更新dom的时候，如果没有改变则不会重新渲染，提升性能
            d. 在虚拟dom渲染为真实结构的过程还是使用原生api实现的
        */


        // 1. 创建虚拟dom
        const vNode = React.createElement(
            'h2',
            // 元素暂时没有额外的属性，那就是null
            null,
            '这是一个标题.'
        )
        // 2. 创建真实的DOM
        const div = document.createElement('div')
        div.textContent = '天王盖地虎.'

        // 3. 当创建一个真实的dom，那么自动生成 310 个左右的属性
        //    当创建一个虚拟的dom，那么生成的属性会少很多很多
        // console.log(vNode);
        // console.log(div);

        // 4. 当渲染一个真实的dom，渲染一次执行一次
        //    当渲染一个虚拟的dom，如果元素内部没有发生任何改变，则不会重新执行
        //    最小粒度更新 - 尽可能少的更新不必要的dom部分
        setTimeout(() => {
            // document.getElementById('app').appendChild(div)
            ReactDOM.render(vNode, document.getElementById('app'))
        }, 3000)
        setTimeout(() => {
            // document.getElementById('app').appendChild(div)
            ReactDOM.render(vNode, document.getElementById('app'))
        }, 4000)
        setTimeout(() => {
            // document.getElementById('app').appendChild(div)
            ReactDOM.render(vNode, document.getElementById('app'))
        }, 5000)

    </script>
</body>
</html>